<template>
  <div class="page">
    <div class="page-header">
      欢迎使用智慧教育学习平台
      <div class="select items-content">
        <div class="select-img">
          <img src="@/assets/images/select.png" alt="" />
        </div>
        切换为学员版
      </div>
    </div>
    <div class="page-min">
      <div class="page-menu">
        <menuTemp @selectNav="selectNav"></menuTemp>
      </div>
      <div class="page-content">
        <div class="content-view">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import menuTemp from "../components/menuTemp.vue";
import { getSession } from "@/utils/index";

let navTitle = ref(getSession("navTitle") || "练习");

/**
 * 切换左边菜单
 */
function selectNav() {
  navTitle.value = getSession("navTitle") || "练习";
}
</script>

<style lang="less" scope>
.page {
  height: 100%;
  .page-header {
    position: relative;
    height: 80px;
    background: #1e62ec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #fff;
    .select {
      position: absolute;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      .select-img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .page-min {
    height: calc(100vh - 80px);
    display: flex;
    align-items: flex-start;
    .page-menu {
      flex: 1;
      height: 100%;
    }
    .page-content {
      // margin: 20px;
      flex: 9;
      // height: calc(100vh - 120px);
      // background: #fff;
      // padding: 20px;
      // box-shadow: 0 0 8px 0 #999;
      // border-radius: 10px;
      // overflow: auto;
      .content-header {
        margin-bottom: 20px;
        color: #696969;
        .close {
          color: #1e90ff;
        }
      }
      .content-view {
      }
    }
  }
}
</style>
